<template>
  <div>
    <p id="no-item" v-if="websiteStore.getWebsites(keyWords).length == 0">暂无数据。</p>
    <div id="items" v-else>
      <div
        class="read-item"
        v-for="(webSite, index) in websiteStore.getWebsites(keyWords)"
        :key="webSite"
        :class="{ selected: currentIndex == index }"
        @click="open(index, webSite.url)"
      >
        <img :src="webSite.screenImg" :alt="webSite.title" />
        <h2>{{ webSite.title }}</h2>
        <button @click.stop="remove(index)">x</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import useWebsiteStore from '../../stores/websiteStore'

const websiteStore = useWebsiteStore()
const currentIndex = ref()
const { keyWords } = inject('keyWords')

function open(index, url) {
  // window.open(url, '_blank', 'width=1300, height=800')
  myApi.open(url)
  currentIndex.value = index
}

function remove(index) {
  websiteStore.remove(index)
  currentIndex.value = 0
}
</script>

<style lang="stylus" scoped>
#no-item
  font-weight bold
  color silver
  text-align center
  width 100%
  position absolute
  top 100px
  z-index 1
#items
  .read-item
     display flex
     align-items center
     align-content center
     border-bottom lightgray 2px solid
     border-left lightgray 6px solid
     -webkit-user-select none
     position relative
     padding 10px
     img
       width 20%
       margin-right 25px
       border solid 1px #ccc
     &:hover
       background #eee
     &:hover button
       display inline-block
     &.selected
       border-left-color:#1e90ff

     button
       position absolute
       display none
       right 10px
       top  10px
       width 30px
       height 30px
       background #f44336
       border none
       border-radius 50%
       color white
       text-align center
       font-size 16px
       cursor pointer
</style>
